<template>
	<view class="settings-container">

		<!-- 用户信息区域 -->
		<view class="user-section" @click="goToUserProfile">
			<view class="user-avatar">
				<u-avatar :src="userAvatar" size="50"></u-avatar>
			</view>
			<view class="user-info">
				<text class="user-name">{{userName}}</text>
			</view>
			<view class="user-arrow">
				<uni-icons type="right" size="16" color="#999"></uni-icons>
			</view>
		</view>

		<!-- 设置选项列表 -->
		<view class="settings-list">
			<view class="settings-item" @click="goToUserLogout">
				<text class="item-text">用户注销</text>
				<uni-icons type="right" size="16" color="#999"></uni-icons>
			</view>
			<view class="settings-item" @click="goToFeedback">
				<text class="item-text">意见反馈</text>
				<uni-icons type="right" size="16" color="#999"></uni-icons>
			</view>
			<view class="settings-item" @click="goToAbout">
				<text class="item-text">关于lilishop</text>
				<uni-icons type="right" size="16" color="#999"></uni-icons>
			</view>
		</view>

		<!-- 退出登录按钮 -->
		<view class="logout-section">
			<view class="logout-btn" @click="logout">
				<text class="logout-text">退出登录</text>
			</view>
		</view>

		<!-- 用户注销确认弹窗 -->
		<u-popup :show="showLogoutModal" mode="center" @close="closeLogoutModal" @open="openLogoutModal"
			customStyle="border-radius: 20px; width:80%; max-width:600rpx;">
			<view class="logout-modal-content">
				<view class="modal-title">提示</view>
				<view class="modal-content">
					<text class="modal-text">确认注销用户么?注销用户将无法再次登录并失去当前数据。根据法规数据最长保留6个月,期间可以联系客服人员进行恢复数据。</text>
				</view>
				<view class="modal-buttons">
					<u-button @click="closeLogoutModal" text="取消" shape="circle" color="#F2F2F2"
						style="color: black; flex: 1; margin-right: 10rpx;"></u-button>
					<u-button @click="confirmUserLogout" text="确定" shape="circle" color="#F2F2F2"
						style="color: red; flex: 1; margin-left: 10rpx;"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import webSocketManager from '@/utils/websocket.js'

	export default {
		data() {
			return {
				userInfo: {
					memberName: '微信用户',
					avatarUrl: '/static/img/我的.png'
				},
				userAvatar: '/static/img/我的.png', // 默认头像
				userName: '微信用户', // 默认用户名
				showLogoutModal: false
			}
		},
		onShow() {
			// 页面显示时加载用户信息
			this.loadUserInfo();
		},
		methods: {
			// 加载用户信息
			loadUserInfo() {
				const savedUserInfo = uni.getStorageSync('userInfo');
				if (savedUserInfo) {
					// 更新头像
					if (savedUserInfo.avatarUrl) {
						this.userAvatar = savedUserInfo.avatarUrl;
					} else if (savedUserInfo.avatar) {
						this.userAvatar = savedUserInfo.avatar;
					}
					// 更新用户名
					if (savedUserInfo.memberName) {
						this.userName = savedUserInfo.memberName;
					} else if (savedUserInfo.nickname) {
						this.userName = savedUserInfo.nickname;
					}
					// 更新用户信息对象
					this.userInfo = { ...this.userInfo, ...savedUserInfo };
				}
			},
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 跳转到用户资料页面
			goToUserProfile() {
				uni.navigateTo({
					url: '/pages/gerenxinxi/gerenxinxi'
				});
			},
			
			// 跳转到用户注销页面
			goToUserLogout() {
				this.showLogoutModal = true;
			},
			
			// 跳转到意见反馈页面
			goToFeedback() {
				uni.navigateTo({
					url: '/pages/yijianfankui/yijianfankui'
				});
			},
			
			// 跳转到关于页面
			goToAbout() {
				uni.navigateTo({
					url: '/pages/guanyuwomen/guanyuwomen'
				});
			},
			
			// 退出登录
			logout() {
				uni.showModal({
					title: '提示',
					content: '是否退出登录?',
					success: (res) => {
						if (res.confirm) {
							// 关闭WebSocket连接
							console.log('退出登录，关闭WebSocket连接')
							webSocketManager.disconnect()
							
							// 清除登录状态
							uni.removeStorageSync('userInfo');
							uni.removeStorageSync('token');
							uni.removeStorageSync('userToken');
							uni.removeStorageSync('isLogin');
							
							uni.showToast({
								title: '已退出登录',
								icon: 'success'
							});
							
							// 返回上一页
							setTimeout(() => {
								uni.navigateBack();
							}, 1500);
						}
					}
				});
			},

			// 弹窗控制方法
			openLogoutModal() {
				this.showLogoutModal = true;
			},
			closeLogoutModal() {
				this.showLogoutModal = false;
			},
			confirmUserLogout() {
				// 执行用户注销逻辑
				uni.showToast({
					title: '用户注销功能开发中',
					icon: 'none'
				});
				this.closeLogoutModal();
			}
		}
	}
</script>

<style scoped>
	.settings-container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	/* 顶部导航栏 */
	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		background-color: #fff;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #eee;
	}
	
	.nav-left {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.nav-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.nav-right {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	/* 用户信息区域 */
	.user-section {
		background-color: #fff;
		padding: 30rpx;
		margin: 20rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
	}
	
	.user-avatar {
		margin-right: 20rpx;
	}
	
	.user-info {
		flex: 1;
	}
	
	.user-name {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
	}
	
	.user-arrow {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	/* 设置选项列表 */
	.settings-list {
		background-color: #fff;
		margin: 20rpx;
		border-radius: 12rpx;
		overflow: hidden;
	}
	
	.settings-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.settings-item:last-child {
		border-bottom: none;
	}
	
	.item-text {
		font-size: 28rpx;
		color: #333;
	}
	
	/* 退出登录按钮 */
	.logout-section {
		padding: 40rpx 20rpx;
	}
	
	.logout-btn {
		width: 100%;
		height: 80rpx;
		background-color: #fff;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.logout-text {
		font-size: 32rpx;
		color: #ff4444;
		font-weight: 500;
	}

	/* 用户注销弹窗样式 */
	.logout-modal-content {
		padding: 40rpx;
		text-align: center;
	}

	.modal-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
	}

	.modal-content {
		margin-bottom: 40rpx;
	}

	.modal-text {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
		text-align: left;
	}

	.modal-buttons {
		display: flex;
		justify-content: space-between;
	}
</style>
